<ng-container *ngIf="showMenu">
  <nz-tree
    #treeCom
    [nzData]="nodes"
    nzMultiple="true"
    nzAsyncData="true"
    (nzClick)="activeNode($event)">
    <ng-template #folderContextTemplate>
      <ul nz-menu nzInDropDown>
        <li nz-menu-item (click)="createNewFile(true)"><i nz-icon [iconfont]="'icon-add-file'"></i>
          {{'Ide0010' | translate}}
        </li>
        <li nz-menu-item (click)="createNewFolder(true)"><i nz-icon [iconfont]="'icon-add-folder'"></i>
          {{'Ide0011' | translate}}
        </li>
        <li nz-menu-divider></li>
        <li nz-menu-item (click)="renameFile($event)"><i nz-icon [iconfont]="'icon-rename'"></i>
          {{'Ide0012' | translate}}
        </li>
        <li nz-menu-divider></li>
        <li nz-menu-item (click)="deleteProjectMenu($event)"><i nz-icon [iconfont]="'icon-delete'"></i>
          {{'Ide0013' | translate}}
        </li>
      </ul>
    </ng-template>
    <ng-template #fileContextTemplate>
      <ul nz-menu nzInDropDown>
        <li nz-menu-item (click)="renameFile($event)"><i nz-icon [iconfont]="'icon-rename'"></i>
          {{'Ide0012' | translate}}
        </li>
        <li nz-menu-divider></li>
        <li nz-menu-item (click)="deleteProjectMenu($event)"><i nz-icon [iconfont]="'icon-delete'"></i>
          {{'Ide0013' | translate}}
        </li>
      </ul>
    </ng-template>
    <ng-template #nzTreeTemplate let-node>
        <span class="custom-node" [class.active]="activedNode?.key===node.key">
          <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event,folderContextTemplate,node)">
            <i nz-icon [type]="node.isExpanded ? 'folder-open' : 'folder'" (click)="openFolder(node)"></i>
            <span class="folder-name">{{node.title}}</span>
          </span>
          <span *ngIf="node.isLeaf" (contextmenu)="contextMenu($event,fileContextTemplate,node)">
            <ng-container *ngIf="node.origin.codeType===codeTypes.blocklyPython3; else blocklyBlock">
              <i nz-icon [iconfont]="'icon-blockly'"></i>
            </ng-container>
            <ng-template #blocklyBlock><i nz-icon [iconfont]="node.title | fileType"></i></ng-template>

            <span class="file-name pr" [ngClass]="{'color-red': !node.origin.id}">{{node.title}}</span>

            <nz-tag *ngIf="node.origin.codeType===codeTypes.blocklyPython3" [nzColor]="'geekblue'">blockly</nz-tag>

            <ng-container *ngIf="activedNode?.key===node.key && selectedLines && projectDataFromFurther.canEdit">
               <a class="color-blue ml" [title]="'Ide0075' | translate" (click)="createBlockInFurther()">
                 <i nz-icon [iconfont]="'icon-open'"></i>
               </a>
            </ng-container>
          </span>
        </span>
    </ng-template>
  </nz-tree>
</ng-container>

<ng-container *ngIf="nodes.length === 0">
  <div class="text-center color-gray p-30">
    <img src="assets/img/empty.svg" alt=""><br>
    {{'Ide0073' | translate}}
  </div>
</ng-container>

<nz-modal [(nzVisible)]="isNewFolder"
          nzTitle="{{'Ide0034' | translate}}"
          [nzMaskClosable]="false"
          (nzOnCancel)="handleCancel()"
          (nzOnOk)="addFolder()">
  <input nz-input name="folder"
         [(ngModel)]="newFolderName"
         placeholder="{{'Ide0035' | translate}}"
         nzSize="large"
         #FolderInput
         required
         (blur)="onFolderInputBlur()"
         (keyup)="inputFolder($event)">
  <p *ngIf="fileNameInvalid" class="mb0 color-red p-5">{{'Ide0038' | translate}}</p>
</nz-modal>

<nz-modal [(nzVisible)]="isNewFile"
          nzTitle="{{'Ide0036' | translate}}"
          [nzMaskClosable]="false"
          (nzOnCancel)="handleCancel()"
          (nzOnOk)="addFile()">
  <div class="mb-15">
    <span>{{'Ide0076' | translate}}</span>
    <nz-radio-group [(ngModel)]="fileType" [nzButtonStyle]="'solid'">
      <label nz-radio-button [nzValue]="codeTypes.plain">{{'Ide0077' | translate}}</label>
      <label nz-radio-button [nzValue]="codeTypes.python3">python</label>
      <label nz-radio-button [nzValue]="codeTypes.blocklyPython3">blockly</label>
    </nz-radio-group>
  </div>

  <input nz-input name="file"
         placeholder="{{'Ide0037' | translate}}"
         nzSize="large"
         #FileInput
         (blur)="onNameInputBlur()"
         [(ngModel)]="newFileName"
         (keyup)="inputFileName($event)">
  <p *ngIf="fileNameInvalid" class="mb0 color-red p-5">{{'Ide0038' | translate}}</p>

  <p class="mb0 p-5" *ngIf="fileType === codeTypes.plain">
    support files with suffix
    <nz-tag [nzColor]="'blue'">.html</nz-tag>
    <nz-tag [nzColor]="'blue'">.js</nz-tag>
    <nz-tag [nzColor]="'blue'">.css</nz-tag>
    <nz-tag [nzColor]="'blue'">.json</nz-tag>
  </p>
</nz-modal>

<nz-modal [(nzVisible)]="isRenameFile"
          nzTitle="{{'Ide0012' | translate}} ['{{oldFileName}}']"
          [nzMaskClosable]="false"
          (nzOnCancel)="handleCancel()"
          (nzOnOk)="saveRename()">
  <input name="rename" nz-input
         placeholder="{{'Ide0037' | translate}}"
         nzSize="large"
         #RenameInput
         (blur)="onInputBlur()"
         [(ngModel)]="fileName"
         (keyup)="inputRenameFile($event)">
  <p *ngIf="fileNameInvalid" class="mb0 color-red p-5">{{'Ide0038' | translate}}</p>
</nz-modal>

<nz-modal [(nzVisible)]="isBindDevice"
          nzTitle="{{'Ide0070' | translate}}"
          [nzMaskClosable]="false"
          (nzOnCancel)="handleCancel()"
          (nzOnOk)="bindDevice()">
  <input name="rename" nz-input
         placeholder="{{'Ide0071' | translate}}"
         nzSize="large"
         #BindDevice
         (blur)="onInputBlur()"
         [(ngModel)]="token"
         (keyup)="inputTokenCode($event)">
  <p *ngIf="bindDeviceInvalid" class="mb0 color-red p-5">{{'Ide0072' | translate}}</p>
</nz-modal>
